<template>
    <div class="sports-head">
        <span class="sports-title" @click="router.push('/home')"> &#60;</span><span class="sports-title">运动圈</span>
    </div>
    <div class="swipe">
        <van-swipe class="van-swip" :autoplay="3000" lazy-render :show-indicators="false">
            <van-swipe-item>
                <img src="../SportsImgs/s2.png" />
            </van-swipe-item>
            <van-swipe-item>
                <img src="../SportsImgs/s1.png" />
            </van-swipe-item>
            <van-swipe-item>
                <img src="../SportsImgs/s3.png" />
            </van-swipe-item>
        </van-swipe>
    </div>
    <div class="sports-nav">
        <van-tabs title-active-color="#168afd" class="van-tabs" v-model:active="active" animated>
            <van-tab  v-for="(item, index) in nav" :key="index" :title="item.title" :to="'/home' +item.path"
                :class="{ 'active': index === active }">
            </van-tab>
        </van-tabs>
    </div>
    <div class="sports-content">
        <RouterView></RouterView>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRouter, RouterView } from 'vue-router';
const active = ref(0);
const router = useRouter();

const nav = ref([
    {
        title: '场馆预定',
        path:"/sports/venue"
    },
    {
        title: "朋友圈",
        path:"/sports/friends"
    },
    {
        title: "培训陪练",
        path:"/sports/train"
    },
    {
        title: "运动银行",
        path:"/sports/bank"
    },
    {
        title: "约战",
        path:"/sports/fight"
    }
])

</script>


<style scoped>
.sports-head {
    position: relative;
    top: 0;
    width: 100%;
}

.sports-head span {
    font-size: 16px
}

.swipe {
    width: 100%;
    height: 160px;
    position: relative;
}

.van-swip {
    width: 100%;
    height: 160px;
}

img {
    width: 100%;
    height: 100%;
}

.sports-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    background-color: #eee;
    padding: 10px 0;
}

.van-tabs {
    width: 100%;

}
</style>